<template>
	<el-popover placement="bottom" width="140" v-model="visibleInter">
		<div @mouseenter="visibleInter=true" @mouseleave="visibleInter=false,active=false">
			<ul class="form-list">
				<li @mouseenter="active=false" v-for="item in twoList">
					<el-tooltip class="item" effect="dark" :content="item.title" placement="right" :enterable="false">
						<div class="down-pad" @click="openInteraction(item.pass)"><i :class="['iconfont', item.icon]"></i>{{ item.name }}</div>
					</el-tooltip>
				</li>
				<li :class="{'active':active}" @mouseenter="active=true">
					<el-popover placement="right" width="140" trigger="hover" v-model="visibleInter2">
						<div @mouseenter="visibleInter=true,active=true" @mouseleave="visibleInter=false,active=false">
							<ul class="form-list">
								<li v-for="item in endList">
									<el-tooltip class="item" effect="dark" content="点击添加计数器" placement="right" :enterable="false">
										<div class="down-pad" @click="openCountnumber(item.pass)"><i :class="['iconfont', item.icon]"></i>{{ item.name }}</div>
									</el-tooltip>
								</li>
							</ul>
						</div>
						<div slot="reference">
							<div class="down-pad"><i class="iconfont icon-count"></i>计数</div>
						</div>
					</el-popover>
				</li>
			</ul>
		</div>
		<div slot="reference" style="padding:0 0 10px;" @mouseenter="visibleInter=true" @mouseleave="visibleInter=false">
			<i class="iconfont icon-interactive"></i><span>互动</span>
		</div>
	</el-popover>
</template>

<script>
	export default {
		name: 'NavMutual',
		data() {
			return {
				visibleInter: false,
				visibleInter2: false,
				active: false,
				twoList: [
					{ name: '链接', title: '点击添加链接', icon: 'icon-link', pass: 'link'},
					{ name: '电话', title: '点击添加电话', icon: 'icon-phone',pass: 'phone'},
					{ name: '音效', title: '点击添加音效', icon: 'icon-sound',pass: 'music_effect'}
				],
				endList: [
					{ name: '喜欢', icon: 'icon-like', pass: 'like'},
					{ name: '顶起', icon: 'icon-jacking', pass: 'fabulous'},
					{ name: '送花', icon: 'icon-flowers', pass: 'flowers'},
					{ name: '投票', icon: 'icon-vote', pass: 'vote'},
				]
			}
		},
		methods: {

			//打开互动
			openInteraction(type) {
				this.$store.commit('SET_INTERACTION', {
					status: true,
					type: type,
					callback: (result) => {
						// console.log(result)
						this.$store.dispatch('addNewComp', {
							name: 'Interaction',
							content: result
						})
					}
				})
			},
			// 打开计数
			openCountnumber(type){
				this.$store.commit('SET_COUNT_NUMBER',{
					status:true,
					btn:type,
					callback:(result)=>{
						this.$store.dispatch('addNewComp', {
							name: 'Countnumber',
							content: result
						})
						// console.log(result)
					}
				})
			}
		}
	}
</script>

<style lang="scss" >
	
</style>
